<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Examples, related projects | MobX</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.4.3">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="gitbook/style.css">
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-edit-link/plugin.css">
        
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
    

        
    
    
    <link rel="next" href="./faq/faq.html" />
    
    
    <link rel="prev" href="./best/stateless-HMR.html" />
    

        
    </head>
    <body>
        
        
    <div class="book" data-level="7" data-basepath="." data-revision="Thu Jul 07 2016 23:11:57 GMT+0200 (CEST)">
    

<div class="book-summary">
    <div class="book-search" role="search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="./index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" >
            
            <span><b>1.</b> Introduction to MobX</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="intro/overview.html">
            
                
                    <a href="./intro/overview.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        The Gist of MobX
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="intro/concepts.html">
            
                
                    <a href="./intro/concepts.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        Concepts &amp; Principles
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="refguide/api.html">
            
                
                    <a href="./refguide/api.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        API overview
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="refguide/observable.html">
            
                
                    <a href="./refguide/observable.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        observable
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="refguide/observable-decorator.html">
            
                
                    <a href="./refguide/observable-decorator.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        @observable
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="refguide/computed-decorator.html">
            
                
                    <a href="./refguide/computed-decorator.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        (@)computed
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.4" data-path="refguide/autorun.html">
            
                
                    <a href="./refguide/autorun.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.</b>
                        
                        autorun
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5" data-path="refguide/observer-component.html">
            
                
                    <a href="./refguide/observer-component.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.</b>
                        
                        @observer
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.6" data-path="refguide/action.html">
            
                
                    <a href="./refguide/action.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.6.</b>
                        
                        action
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3" >
            
            <span><b>3.</b> Observable Types</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.1" data-path="refguide/object.html">
            
                
                    <a href="./refguide/object.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        objects
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="refguide/array.html">
            
                
                    <a href="./refguide/array.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        arrays
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="refguide/map.html">
            
                
                    <a href="./refguide/map.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        maps
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="refguide/boxed.html">
            
                
                    <a href="./refguide/boxed.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        boxed values
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4" data-path="faq/blogs.html">
            
                
                    <a href="./faq/blogs.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                        Videos, tutorials and blogs
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5" data-path="faq/related.html">
            
                
                    <a href="./faq/related.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                        Examples, Boilerplates &amp; Related Projects
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6" >
            
            <span><b>6.</b> Tips &amp; Tricks</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="6.1" data-path="best/react.html">
            
                
                    <a href="./best/react.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.1.</b>
                        
                        What does MobX react to?
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.2" data-path="best/pitfalls.html">
            
                
                    <a href="./best/pitfalls.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.2.</b>
                        
                        Common Pitfalls &amp; Best Practices
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.3" data-path="best/store.html">
            
                
                    <a href="./best/store.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.3.</b>
                        
                        Defining data stores
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.4" data-path="best/actions.html">
            
                
                    <a href="./best/actions.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.4.</b>
                        
                        Writing (async) actions
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.5" data-path="best/react-performance.html">
            
                
                    <a href="./best/react-performance.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.5.</b>
                        
                        Optimizing React components
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.6" data-path="best/devtools.html">
            
                
                    <a href="./best/devtools.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.6.</b>
                        
                        DevTools
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.7" data-path="best/syntax.html">
            
                
                    <a href="./best/syntax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.7.</b>
                        
                        ES5 / ES6 / TypeScript syntax
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.8" data-path="best/stateless-HMR.html">
            
                
                    <a href="./best/stateless-HMR.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.8.</b>
                        
                        Stateless Components and Hot Module Reloading
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.9" >
            
            <span><b>6.9.</b> Optimizing MobX</span>
            
            
        </li>
    
        <li class="chapter " data-level="6.10" >
            
            <span><b>6.10.</b> Testing</span>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter active" data-level="7" data-path="LINKS.html">
            
                
                    <a href="./LINKS.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>7.</b>
                        
                        Examples, related projects
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="8" data-path="faq/faq.html">
            
                
                    <a href="./faq/faq.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>8.</b>
                        
                        Frequently Asked Questions
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9" >
            
            <span><b>9.</b> Utility functions</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="9.1" data-path="refguide/autorun-async.html">
            
                
                    <a href="./refguide/autorun-async.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.1.</b>
                        
                        autorunAsync
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.2" data-path="refguide/extending.html">
            
                
                    <a href="./refguide/extending.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.2.</b>
                        
                        Atom &amp; Reaction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.3" data-path="refguide/create-transformer.html">
            
                
                    <a href="./refguide/create-transformer.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.3.</b>
                        
                        createTransformer
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.4" data-path="refguide/expr.html">
            
                
                    <a href="./refguide/expr.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.4.</b>
                        
                        expr
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.5" data-path="refguide/extend-observable.html">
            
                
                    <a href="./refguide/extend-observable.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.5.</b>
                        
                        extendObservable
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.6" data-path="refguide/is-observable.html">
            
                
                    <a href="./refguide/is-observable.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.6.</b>
                        
                        isObservable
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.7" data-path="refguide/modifiers.html">
            
                
                    <a href="./refguide/modifiers.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.7.</b>
                        
                        modifiers
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.8" data-path="refguide/observe.html">
            
                
                    <a href="./refguide/observe.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.8.</b>
                        
                        observe
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.9" data-path="refguide/reaction.html">
            
                
                    <a href="./refguide/reaction.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.9.</b>
                        
                        reaction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.10" data-path="refguide/spy.html">
            
                
                    <a href="./refguide/spy.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.10.</b>
                        
                        spy
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.11" data-path="refguide/tojson.html">
            
                
                    <a href="./refguide/tojson.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.11.</b>
                        
                        toJS
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.12" data-path="refguide/transaction.html">
            
                
                    <a href="./refguide/transaction.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.12.</b>
                        
                        transaction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.13" data-path="refguide/untracked.html">
            
                
                    <a href="./refguide/untracked.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.13.</b>
                        
                        untracked
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9.14" data-path="refguide/when.html">
            
                
                    <a href="./refguide/when.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.14.</b>
                        
                        when
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Table of Contents"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Font Settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Share"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">
                    Share on Twitter
                </button>
                <button type="button" data-sharing="google-plus" class="button">
                    Share on Google
                </button>
                <button type="button" data-sharing="facebook" class="button">
                    Share on Facebook
                </button>
                <button type="button" data-sharing="weibo" class="button">
                    Share on Weibo
                </button>
                <button type="button" data-sharing="instapaper" class="button">
                    Share on Instapaper
                </button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Google"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
    
    
    


    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="./" >MobX</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <a id="edit-link" href="https://github.com/mobxjs/mobx/tree/gh-pages/docs/LINKS.md" class="btn fa fa-edit pull-left">&nbsp;&nbsp;Edit This Page</a><h1 id="resources">Resources</h1>
<ul>
<li><a href="https://mobxjs.github.io/mobx/getting-started.html#demo" target="_blank">Ten minute interactive introduction to MobX and React</a></li>
<li>How MobX works: <a href="https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254#.wnlo6bw8y" target="_blank">In depth explanation of MobX</a></li>
<li>Clone the boilerplate repository containing the above example from: <a href="https://github.com/mweststrate/react-mobservable-boilerplate" target="_blank">https://github.com/mweststrate/react-mobservable-boilerplate</a>.</li>
<li>Or fork this <a href="https://jsfiddle.net/mweststrate/wgbe4guu/" target="_blank">JSFiddle</a>.</li>
</ul>
<h2 id="related-projects">Related projects</h2>
<ul>
<li><a href="https://github.com/nightwolfz/mobx-connect" target="_blank">mobx-connect</a> MobX @connect decorator for react components. Similar to redux&apos;s @connect.</li>
<li><a href="https://github.com/foxhound87/rfx-stack" target="_blank">rfx-stack</a> RFX Stack - Universal App featuring: React + Feathers + MobX</li>
<li><a href="https://github.com/amsb/mobx-reactor" target="_blank">mobx-reactor</a> Connect MobX data stores to functional stateless React components with async actions and unidirectional data flow.</li>
<li><a href="https://github.com/ikido/mobx-model" target="_blank">mobx-model</a> Simplify mobx data stores that mimic backend models </li>
<li><a href="https://github.com/chicoxyzzy/rx-mobx" target="_blank">rx-mobx</a> Convert Mobx observables to RxJS and vice versa</li>
</ul>
<h2 id="more-examples">More examples</h2>
<p>A nice list is WIP, but see this <a href="https://github.com/mobxjs/mobx/issues/104" target="_blank">github issue</a> for a list of example projects, including routing, authorization, server side rendering etc.</p>
<ul>
<li><a href="https://github.com/mweststrate/mobx-todomvc" target="_blank">TodoMVC using MobX and React</a></li>
<li>The <a href="https://github.com/survivejs/mobservable-demo" target="_blank">ports of the <em>Notes</em> and <em>Kanban</em> examples</a> from the book &quot;SurviveJS - Webpack and React&quot; to mobservable.</li>
<li>A simple webshop using <a href="https://jsfiddle.net/mweststrate/46vL0phw" target="_blank">React + mobx</a> or <a href="http://jsfiddle.net/mweststrate/vxn7qgdw" target="_blank">JQuery + mobx</a>.</li>
<li><a href="https://jsfiddle.net/mweststrate/wgbe4guu/" target="_blank">Simple timer</a> application in JSFiddle.</li>
<li><a href="https://github.com/mattruby/mobx-examples" target="_blank">Simple ES5 MobX examples</a> Bite sized MobX examples all setup to run in jsFiddle.</li>
</ul>
<h2 id="philosophy">Philosophy</h2>
<ul>
<li><a href="https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/" target="_blank">Making React reactive: the pursuit of high performing, easily maintainable React apps</a></li>
<li><a href="http://survivejs.com/blog/mobservable-interview/" target="_blank">SurviveJS interview on Mobservable, React and Flux</a></li>
<li><a href="https://medium.com/@mweststrate/pure-rendering-in-the-light-of-time-and-state-4b537d8d40b1" target="_blank">Pure rendering in the light of time and state</a></li>
<li><a href="http://mobxjs.github.io/mobx/" target="_blank">Official homepage</a></li>
</ul>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="./best/stateless-HMR.html" class="navigation navigation-prev " aria-label="Previous page: Stateless Components and Hot Module Reloading"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="./faq/faq.html" class="navigation navigation-next " aria-label="Next page: Frequently Asked Questions"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="gitbook/app.js"></script>

    
    <script src="gitbook/plugins/gitbook-plugin-github/plugin.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-ga/plugin.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-disqus/plugin.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-edit-link/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2},"github":{"url":"https://github.com/mobxjs/mobx"},"edit-link":{"base":"https://github.com/mobxjs/mobx/tree/gh-pages/docs","label":"Edit This Page"},"ga":{"token":"UA-65632006-1","configuration":"auto"},"disqus":{"shortName":"mobservable"}};
    gitbook.start(config);
});
</script>

        <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-65632006-1', 'auto');ga('send', 'pageview');</script>
    </body>
    
</html>
